<template>
  <div>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.operatorName"
            :placeholder="$t('operator.name')"
            maxlength="32"
            clearable
            @blur="() => (dataForm.operatorName = dataForm.operatorName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="w-8"
            @click="getDataList((pageNo = 1))"
          >
            <svg-icon icon-class="Search" />
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button
            v-if="this.currentGroupId !== 1 && isAuth('10400006.MANAGE')"
            type="primary"
            class="w-8"
            @click="bindOperatorHandle()"
          >
            <svg-icon icon-class="Plus" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe>
        <el-table-column
          prop="operatorName"
          :label="$t('group.operator.name')"
        />
        <!--        <el-table-column
          prop="creTime"
          
          
          :label="$t('group.operator.creTime')">
        </el-table-column>-->
        <el-table-column prop="creTime" :label="$t('group.operator.bindTime')">
          <template v-slot="scope">
            <label>{{
              formatDate(scope.row.creTime, 'YYYY-MM-DD  HH:mm:ss')
            }}</label>
          </template>
        </el-table-column>
        <el-table-column
          v-if="this.currentGroupId !== 1 && isAuth('10400006.MANAGE')"
          width="75px"
        >
          <template v-slot="scope">
            <el-button
              text
              style="color: var(--el-color-danger)"
              class="w-8 hover:bg-danger"
              @click="
                deleteHandle(scope.row.operatorId, scope.row.operatorName)
              "
            ><svg-icon icon-class="Delete"/></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <add-operator
      ref="addOperator"
      v-model="visible"
      @close="visible = false"
      @refreshDataList="refresh"
    />
  </div>
</template>

<script>
import { formatDate } from '@/utils/formatDate'
import { groupOperatorPage, delgroupOperator } from '@/api/group'
import AddOperator from './add-operator'
import { isAuth } from '@/utils'

export default {
  components: {
    AddOperator
  },
  props: [`groupId`],
  data() {
    return {
      dataForm: {
        operatorName: ''
      },
      visible: false,
      currentGroupId: '',
      dataList: [],
      dataListLoading: false,
      pageNo: 1,
      pageSize: 10,
      rows: 0
    }
  },
  watch: {
    groupId(value) {
      if (value) {
        this.currentGroupId = value
        this.getDataList()
      }
    }
  },
  methods: {
    isAuth,
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let value = row[column.property]
      if (value != null) {
        if (column.property === 'creTime') {
          value = this.formatDate(row[column.property], 'YYYY-MM-DD HH:mm:ss')
        }
        if (value.length * 13 > column.width) {
          return 'font-size:' + (column.width * 0.95) / value.length + 'px'
        }
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    refresh() {
      this.pageNo = 1
      this.getDataList()
    },
    getDataList() {
      this.dataListLoading = true
      const params = {
        operatorName: this.dataForm.operatorName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      groupOperatorPage(this.currentGroupId, params)
        .then((data) => {
          this.dataList = data.data
          this.rows = data.rows
          this.dataListLoading = false
        })
        .catch((e) => {
          this.$confirmError(e)
          this.dataList = []
          this.rows = 0
        })
        .finally(() => {
          this.dataListLoading = false
        })
    },
    deleteHandle(operatorId, operatorName) {
      this.$confirm(
        this.$t('group.tipDeleteOperator', { operatorName: operatorName }),
        '',
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.dataListLoading = true
        delgroupOperator(this.groupId, operatorId)
          .then((data) => {
            this.getDataList()
          })
          .catch((e) => {
            this.$confirmError(e)
            this.dataListLoading = false
          })
      })
    },
    bindOperatorHandle() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.addOperator.init(this.currentGroupId)
      })
    }
  }
}
</script>
